<template>
    <div class="category-details">
        <category-header><span>书籍分类</span></category-header>
        <div class="nav">
            <ul>
                <li :class="indexs == index ? 'active' : ''" v-for="(item, index) in infolist" :key="item.uid" @click="getCategoryList(index, item.uid)">{{ item.name }}</li>
                <!-- <li>玄幻</li>
                <li>悬疑</li>
                <li>历史</li>
                <li>军事</li>
                <li>科幻</li>
                <li>同人</li>
                <li>短篇</li> -->
            </ul>
            <div class="right_box">
                <i></i>
            </div>
        </div>

        <div class="details_box">
            <div class="details_box_con">
                <div class="top_tag">
                    <span class="hots active">畅销</span>
                    <span class="news">最新</span>
                </div>

                <div class="content_list">
                    <PlateStyleList :third="searchlist" />
                    <!-- <keep-alive>
                    </keep-alive> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CategoryHeader from "@/components/category-header.vue";
import PlateStyleList from "@/components/plate-style-list.vue";
import { bookStoreInfo, bookSearchBook } from "@/api/found";
export default {
    data() {
        return {
            infolist: [],
            indexs: 0,
            searchlist: [],
        };
    },
    methods: {
        getStoreInfo() {
            let data = {
                type: this.$route.query.type,
                bar: this.$route.query.bar,
                uuid: this.$route.query.uuid,
            };
            bookStoreInfo({ data }).then((res) => {
                // console.log(res);
                let result = res.list[0].labels;
                result.map((item) => {
                    let arr = {};
                    arr.desc = item.desc;
                    arr.name = item.name;
                    let uid = item.url.split(/&?[a-z\/\?\.]*=/);
                    arr.uid = uid[1];
                    this.infolist.push(arr);
                });
                // this.infolist = result;
                console.log(this.infolist);
            });
        },

        getCategoryList(index, uid) {
            this.indexs = index;
            // console.log(uid);
            let data = {
                catId: uid,
                wordCount: 0,
                pay: 0,
                bookStatus: 0,
                sort: 1,
            };
            bookSearchBook({ data }).then((res) => {
                // console.log(res);
                // let result = res;
                // console.log(result);
                this.searchlist = res;
                // console.log(this.searchlist);
            });
        },
    },
    created() {
        this.getStoreInfo();
    },
    mounted() {
        // this.getCategoryList(0, this.infolist[0].uid);
        // console.log(this.infolist[0].uid);
    },
    components: {
        CategoryHeader,
        PlateStyleList,
    },
};
</script>
<style lang="scss" scoped>
.category-details {
    width: 100%;
    padding: 0 15px;
    .nav {
        width: 100%;
        height: 30px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;

        ul {
            width: 90%;
            height: 100%;
            overflow-x: scroll;
            display: flex;
        }
        ul::-webkit-scrollbar {
            display: none;
        }
        li {
            height: 100%;
            line-height: 30px;
            margin-right: 15px;
            font-size: 14px;
            color: #999;
            flex-shrink: 0;
            padding-bottom: 5px;
            border-bottom: 3px solid transparent;
            box-sizing: border-box;

            &:last-child {
                margin-right: 0px;
            }
        }
        .active {
            color: #e0c9a0;
            border-bottom: 3px solid #e0c9a0;
        }
        .right_box {
            // border-left: 1px solid #999;
            width: 10%;
            height: 20px;
            text-align: right;
            i {
                width: 20px;
                margin: 0 auto;
                display: inline-block;
                height: 20px;
                // background: #000;
                background-image: url(@/assets/xian.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
    }

    .details_box {
        width: 100%;
        padding: 15px 0;
    }
    .details_box_con {
        // border: 1px solid #000;
        // height: 500px;

        .top_tag {
            .hots,
            .news {
                padding: 4px 12px;
                font-size: 12px;
                color: #313131;
                border-radius: 20px;
                margin-right: 5px;
                background: transparent;
            }
            .active {
                background: #f0f0f0;
            }
        }

        .content_list {
            padding-top: 15px;
        }
    }
}
</style>
